<!DOCTYPE HTML>
<html>
<head>
<title>Activitys</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/userInfo.js"></script>
<link href="css/component.css" rel="stylesheet" type="text/css"  />

<style>
	.container{
		display: flex;
		flex-direction: row ;
		width: 80%;
	}
	.frendsList{
		width: 30%;
		background-color: gray;
		border: 1px solid;
		text-align: center;
	}
	.contact-form{
		width: 70%;
	}
	#talkBolck{
		overflow: auto;
		width: 100%;
		margin-bottom: 2%;
		display : flex ;
		flex-direction:column;
		align-content: flex-start;
	}
	.row{
		margin-right: -15px;
		margin-left: -15px;
	}
	
	hr {
	    background: none !important;
	    height: 1px !important;
	    border: 0 !important;
	    border-top: 1px solid #eee !important;
	}
	.panel{
		margin: 0 auto;
		border-radius: 10px;
		width: 70%;
		height: 1000px;
		border: 1px solid transparent;
		overflow: auto;
		box-shadow: 0 5px 15px 0 rgb(0 0 0 / 8%);
		
	}
	.activity-index-block {
	    padding: 15px 10px 15px 10px;
	}
	.activity_title{
		font-size: 25px;
		font-family: 'Satisfy';
		font-style: normal;
		font-weight: 400;
	}
	.activity_th{
		font-size: 25px;
	}
	.activity-line:hover{
		background-color: aliceblue;
	}
	.acHeader{
		font-size : 35px ;
		font-weight: 400;
	}
	.myBody{
		background: white url("images/background.png") fixed;
		background-size: auto;
	}
	.activity_abstract{
		font-size: 20px;
		color: gray;
	}
</style>
</head>
<body class="myBody">

<!--header-->
	<div class="header-section2">
			<div class="container">
				<div class="header-top">
					<div class="top-nav">
						<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
							<h3>Menu</h3>
							<ul>
								<li><a href="index.html">主页</a></li>
									 <script>
									   $( "li.menu" ).click(function() {
										 $( "ul.cl-effect-1" ).slideToggle( 300, function() {
										 // Animation complete.
										  });
										 });
									</script>
								<li><a href="activitys.html">日常活动</a></li>
								<li><a href="gallery.html">匹配功能</a></li>
								<li><a href="mail.html">聊天室</a></li>
								<li><a href="mail.html">个人主页</a></li>
							</ul>
						</nav>
						<div class="main buttonset">	
								<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
								<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
								<!--<span class="menu"></span>-->
						</div>
						<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
						<script src="js/classie.js"></script>
						<script>
						var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
						showRightPush = document.getElementById( 'showRightPush' ),
						body = document.body;

						showRightPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toleft' );
							classie.toggle( menuRight, 'cbp-spmenu-open' );
							disableOther( 'showRightPush' );
						};

						function disableOther( button ) {
							if( button !== 'showRightPush' ) {
								classie.toggle( showRightPush, 'disabled' );
							}
						}
					 </script>
					</div>
					<div class="header-logo">
						<a href="index.html"><img src="images/yuanfen.png" alt="" width="300" height="200"/></a>
					</div>
					
					<div class="clearfix"> </div>
				</div>
			</div>
	</div>
<!--/header-->
<!-- content -->
<div class="panel" >
	<h1 class="text-center">缘分网站热门活动</h1>
	<h6 class="text-center">点击未参与按钮可以进行参与活动</h6>
	<br>
	<hr style="margin: 30px 0 1px 0;">
	
	<div v-for="(item,index) in Activitys">
	<div class="activity-index-block">
	    <div class="row activity-indexLine">
	        <div class="hidden-sm hidden-xs col-md-2" style="max-width: 200px;">
	            <img src="images/sport.webp" width="150px" alt="活动封面">
	        </div>
	        <div class="col-md-10">
	                <div class="row activity-line" >
	                    <div class="col-xs-8 col-sm-8">
	                        <span class="activity_title">{{item.name}}</span>
	                        
	                        
	                    </div>
	                    <div class="col-xs-4 col-sm-4" align="right">
	                        <span v-bind:class="'btn btn-'+item.txt+' activity_status'" v-on:click="join(item.join, item.id)">
	                            {{item.join}}
	                        </span>
	                    </div>
	                    <div class="col-xs-12 col-sm-6">
	                        <div class="visible-xs-block">
	                            <hr style="margin: 5px;">
	                        </div>
	                        <span class="activity_abstract">{{item.introduction}}</span>
	                    </div>
	                    <div class="col-xs-12 col-sm-6 text-center">
	                        <div class="visible-xs-block">
	                            <hr style="margin: 5px;">
	                        </div>
	                        <div class="col-xs-6">
	                            <span class="activity_th">参与人数</span>
	                            <br>
	                            <span class="activity_td">{{item.currPeople}}</span>
	                        </div>
	                        <div class="col-xs-6">
	                            <span class="activity_th">创建时间</span>
	                            <br>
	                             <span class="activity_td">{{item.createTime}}</span>      
	                        </div>
							
	                    </div>
	                </div>
	        </div>
	    </div>
	</div>
	<hr style="margin: 0;">
	</div>
	
</div>
<!-- content-end -->
		
		<div class="copy-right-section">
				<div class="container">
					<div class="col-md-6 copy-right" style="text-align: center;">
						<p>一起来交友~~<a target="_blank" href="adminWeb/login.html">@Admin</a></p>
					</div>
				</div>
		</div>	
	
</body>
<script>
	config = {
		"el" : ".panel" ,
		"data" : {
			"txts" : ["danger", "success", "warning"], 
			
			"Activitys" : [{
				"id" : 0,
				"name" : "一起运动吧~",
				"join" : "测试用",
				"txt" : "warning",
				"introduction" : "打球........",
				"currPeople" : 1213,
				"createTime" : ""
			}],
			
			"all" : [],
			"joins" : []
		},
		"methods" : {
			"join" : function(join, aid) {
				if(join == "测试用"||join=="已参加"||join=="人数已满"){
					return ;
				}
				var id = window.sessionStorage.getItem("id") ;
				var u = url + "/activity/joinActivity?activityId="+ aid +"&userId=" + id ;
				
				axios.get(u)
				.then(function(response){
					window.location.href = "activitys.html" ;
				})
				.catch();
			}
		},
		
		"mounted" : function(){
			
			var id = window.sessionStorage.getItem("id") ;
			u = url + "/activity/selectByUserId?userId=" + id;
			console.log(u) ;
			
			axios.get(u)
			.then(res => {
                console.log(res.data.data)
                var list = res.data.data ;
				
				for (var i = 0; i < list.length; i++) {
					var f = (list[i].numPeople == list[i].currPeople) ;
					var t = (list[i].joinOrnot == 1) ? "已参加" : "未参加" ;
					t = (f)?"人数已满":t ;
					
					var t2 = (f)?"danger": ((list[i].joinOrnot == 1) ? "success" : "warning") ;
					
					var e = {
						"id" : list[i].id,
						"name" : list[i].name,
						"join" : t,
						"txt" : t2,
						"introduction" : list[i].introduction,
						"currPeople" : list[i].currPeople,
						"createTime" : list[i].createTime
					} ;
					
					this.Activitys.push(e) ;
					
				}
            }).catch() ;
			
			console.log(this.Activitys) ;
		}
	}
	
	var vue = new Vue(config) ;
</script>
</html>